<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环写法</title>
	</head>
	<body>
		<div id="app">
			<!-- vue中的循环
				 1.循环获取数据的内容
				 2.可以循环复制标签
				 参数说明:
					item:变量名称 名称随意
					in: 关键字 固定写法
					array: 需要遍历的数据-->
			<h1 v-for="item in array">{{item}}</h1>
			
			<hr />
			<!-- 语法第二种: 获取数据/下标 -->
			<h1 v-for="(item,index) in array">{{item}}--{{index}}</h1>
			
			<hr />
			<!-- 循环遍历集合 -->
			<div v-for="item in userList">
				<p>ID号:{{item.id}}</p>
				<p>名称:{{item.name}}</p>
			</div>
			<hr />
			<!-- 如果直接遍历对象,则输出的时value值 
				 参数说明: 1.value 对象的值-->
			<div v-for="(value,key) in user">{{key}}--{{value}}</div>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app=new Vue({
				el:"#app",
				data:{
					array:["安琪拉","孙悟空","李元芳"],
					userList:[{
						id: 100,
						name: "鲁班"
					},{
						id: 200,
						name: "狂铁"
					},{
						id:300,
						name: "瑶"
					}],
					user:{
						id: 100,
						name: "鲁班",
						sex:"男"
					}
				}
			})
		</script>
	</body>
</html>
